<template>
	<view class="u-flex">
		<view class="u-margin-right-12 u-position-relative" >
			<item-btn width="194" height="64" @click="selectItem" :type="isPlain ? 'plain' : ''">
				<slot><text class="u-font-24">{{item.cityName}}{{item.grantNumber}}/{{item.totalNumber}}本</text></slot>
			</item-btn>
			<!-- <view class="close u-flex u-row-center" @click="remove" v-if="showDelete">
				<u-icon name="close" custom-prefix="custom-icon" size="15" color="#333"></u-icon>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			item: {
				type: Object,
				default: ()=>({})
			},
			isEdit:{
				type:Boolean,
				default:false
			},
			width:{
				type:String,
				default:'100%'
			},
			isPlain:{
				type:Boolean,
				default: false
			},
			showDelete:{
				type:Boolean,
				default: true
			},
		},
		methods: {
			selectItem() {
				this.isEdit&&this.$emit('select',this.item)
			},
			remove(){
				this.$emit('remove',this.item.id)
			}
		},
	}
</script>


<style lang="scss" scoped>
	.close{
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: var(--background-second-color);
		top: -14rpx;
		right: -14rpx;
	}
</style>
